<template>
	<view class="right-content">
		<view class="author-img">
			<image class="img" src="../static/image/portrait.png" mode="" @click="goUser"></image>
			<view v-show="!follow" class="iconfont iconjiahao add" @click="hide">
			</view>
		</view>
		<view class="iconfont iconaixin1 right-box" :style="{color: colorFlag?'red':'white'}" @click="changeColor">
		</view>
		<view class="number">
			{{item.loveNumber}}
		</view>
		<view class="iconfont iconpinglun-copy right-box" @click="openComment">
		</view>
		<view class="number">
			{{item.commentNumber}}
		</view>
		<view class="iconfont iconshare-copy right-box">
		</view>
		<view class="number">
			{{item.shareNumber}}
		</view>
		<view class="around">
			<image class="img" src="../static/image/douyin.jpg" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['item'],
		data() {
			return {
				follow: false,
				colorFlag: false
			};
		},
		methods: {
			hide() {
				this.follow = true
			},
			changeColor() {
				this.colorFlag = !this.colorFlag
			},
			goUser() {
				uni.navigateTo({
					url: '/pages/user/user'
				})
			},
			openComment() {
				this.$emit('open')
			}
		},
		onReady() {
			uni.$on('dbClick', () => {
				this.changeColor()
			})
		}
	}
</script>

<style lang="scss" scoped>
	.right-content {
		width: 50px;
		margin: 0 auto;
		color: #ffffff;
	}

	.author-img {
		height: 50px;
		width: 50px;
		border-radius: 25px;
		border: 2px solid #ffffff;
		position: relative;

		.add {
			width: 18px;
			height: 18px;
			border-radius: 50%;
			background-color: red;
			color: #ffffff;
			text-align: center;
			position: absolute;
			left: 16px;
			bottom: -9px;
			line-height: 18px;
			font-size: 10px;
		}
	}

	.img {
		height: 50px;
		width: 50px;
		border-radius: 25px;
	}

	.right-box {
		width: 50px;
		height: 40px;
		margin-top: 13px;
		text-align: center;
		line-height: 40px;
		color: #ffffff;
		font-size: 33px;
	}

	.number {
		font-size: 10px;
		text-align: center;
	}

	.around {
		height: 50px;
		width: 50px;
		margin-top: 15px;
		animation: rotate 3s linear 0.2s infinite;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		,
		100% {
			transform: rotate(360deg);
		}
	}
</style>
